/**
 * 创建动画图表解析函数
 * @param XAxisStart - 起始点的X轴坐标
 * @param XAxisEnd - 终止点的X轴坐标
 * @param YAxisStart - 起始点的Y轴坐标
 * @param YAxisEnd - 终止点的Y轴坐标
 * @returns 返回动画曲线的解析函数，函数输入自变量，返回对应坐标值
 */
const createAnimationDiagramFn = (XAxisStart, XAxisEnd, YAxisStart, YAxisEnd) => {
    return function (value) {
        // 取值范围和值域限制
        if (value < XAxisStart)
            return YAxisStart;
        if (value > XAxisEnd)
            return YAxisEnd;
        // 这里函数曲线为线性函数（如有必要可以整成贝塞尔曲线一样的曲线函数映射关系）
        const progress = (value - XAxisStart) / (XAxisEnd - XAxisStart);
        return YAxisStart + (YAxisEnd - YAxisStart) * progress;
    };
};
const animationContainer = document.querySelector(".animation-container");
const animationViewport = document.querySelector(".animation-viewport");
const textEl = document.querySelector(".text-fade");
const styleStatusMap = new Map();
const createElementAnimationStatusObj = (itemEl, xAxisStart, xAxisEnd) => {
    // 初始状态
    itemEl.style.backgroundPositionX = "100%";
    const backgroundPositionX = (currentXAxis) => {
        return `${createAnimationDiagramFn(xAxisStart, xAxisEnd, 100, 0)(currentXAxis)}%`;
    };
    return {
        backgroundPositionX
    };
};
const setMap = () => {
    styleStatusMap.set(textEl, createElementAnimationStatusObj(textEl, animationViewport.offsetTop, animationViewport.offsetTop + animationContainer.offsetHeight - animationViewport.offsetHeight));
};
setMap();
// 从 Map 中取出元素，并根据变化的 x 轴值，设置它的实时状态
const updateStyles = (currentXAxis, styleStatusMap) => {
    for (const [element, statusObj] of styleStatusMap) {
        for (const cssProperty in statusObj) {
            const getCurrentStatus = statusObj[cssProperty];
            element.style[cssProperty] = `${getCurrentStatus(currentXAxis)}`;
        }
    }
};
// 滚动驱动 x 轴变化
document.addEventListener("scroll", () => {
    updateStyles(document.documentElement.scrollTop, styleStatusMap);
});
